<template>
  <el-row class="mx__20 px-20 bg-white">
    <el-col class="current-content-style" style="min-height: 500px">
      <el-row class="py-20">
        <el-col class="text-right">
          <el-button>全部推送</el-button>
          <el-button>推送消息</el-button>
          <el-button>导出明细</el-button>
          <el-button>导出账单</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            stripe
            :data="tableData"
            style="width: 100%"
            :header-row-class-name="
              ({ row, rowIndex }) => {
                if (rowIndex === 0) return 'table-header-bg'
              }
            "
          >
            <el-table-column prop="customerName" label="客户名称"> </el-table-column>
            <el-table-column prop="waterNumber" label="水表编号"> </el-table-column>
            <el-table-column prop="recordTime" label="账单时间"> </el-table-column>
            <el-table-column prop="billingName" label="用水类型"> </el-table-column>
            <el-table-column prop="recordCreateTime" label="抄表日期"> </el-table-column>
            <el-table-column label="上月度数" width="80" prop="recordLast"> </el-table-column>
            <el-table-column label="本月抄表读数" prop="recordNow"> </el-table-column>
            <el-table-column label="实际用量(吨)" prop="recordConsumption"> </el-table-column>
            <el-table-column prop="billReceivable" label="应收金额(元)"> </el-table-column>
            <el-table-column prop="billDeduction" label="减免金额(元)"> </el-table-column>
            <el-table-column prop="billPaid" label="实收金额(元)"> </el-table-column>

            <el-table-column label="操作" prop="billDeduction">
              <template v-slot="scope">
                <el-button type="text" @click="decrementHandler(scope.row.billId, scope.row.billDeduction)"
                  >减免</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- <el-row class="my-20" style="text-align: right">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row> -->
      <el-dialog title="减免金额" :visible.sync="addBillVisible" width="30%">
        <el-row>
          <el-col>
            <el-form :model="form" label-width="120px">
              <el-form-item label="减免金额" prop="decrement">
                <el-input
                  ref="formInput"
                  v-model="form.decrement"
                  type="text"
                  placeholder="
注：不能大于应收金额,必须有2位小数"
                  @change="checkDerementMoney"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addBillVisible = false">取 消</el-button>
          <el-button type="primary" @click="deductionAmountHandler">确 定</el-button>
        </span>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
// 账单详细
import { waterBillDeductionAmount } from './../config/api'
export default {
  data() {
    return {
      addBillVisible: false,
      form: {
        decrement: 0,
        id: 0
      },
      month: '2022-10',
      // pageSizes: [5, 10, 15, 20],
      // pageSize: 5,
      // total: 100,
      // currentPage: 1,
      // tableData: [],
      bill: {},
      rules: {
        decrement: [
          {
            type: 'string',
            pattern: /(^\d+$)|(^\d+\.\d{0,2}$)/,
            required: true,
            message: '只能数字和".",小数只能有2位'
            // trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    // this.getBillInfo()
  },
  computed: {
    tableData() {
      // this.bill = this.$store.state.bill

      // let obj = {
      //   ...this.bill
      // }
      // console.log(obj)
      return [this.$store.state.bill]
    }
  },
  methods: {
    // 检查减免得金额
    checkDerementMoney() {
      // console.log(this.$refs)
      if (/(^\d+$)|(^\d+\.\d{0,2}$)/.test(this.form.decrement)) {
        if (this.form.decrement > this.bill.billReceivable) {
          this.$message({
            type: 'error',
            message: '减免金额不能大于应收金额！'
          })
          this.form.decrement = 0
          this.$refs.formInput.focus()
        }
      } else {
        this.$message({
          type: 'error',
          message: '只能数字0-9和".",小数最多有2位'
        })
        this.form.decrement = 0
        this.$refs.formInput.focus()
      }
    },
    //减免金额
    deductionAmountHandler() {
      console.log(this.form)
      if (this.form.decrement === 0) {
        this.addBillVisible = false
        return
      }
      waterBillDeductionAmount({ billId: this.form.id, money: this.form.decrement }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '设置减免金额成功'
          })
          //减免成功后，需要直接改vuex里面得状态，不再调用后台。
          let objBill = this.$store.state.bill // 重新拿vuex得state
          objBill.billDeduction = this.form.decrement // 设置减免金额
          objBill.billPaid = objBill.billReceivable - this.form.decrement //实收金额
          this.$store.commit('bill', objBill) //修改vuex
          sessionStorage.setItem('bill', JSON.stringify(objBill)) //同时修改sessionStorage
          this.addBillVisible = false //隐藏modal
        } else {
          this.$message({
            type: 'error',
            message: '减免金额失败'
          })
        }
      })
    },
    // 从vuex获取当前账单得详细数据
    getBillInfo() {
      this.bill = this.$store.state.bill

      let obj = {
        ...this.bill
      }
      console.log(obj)
      this.tableData.push(obj)
    },
    decrementHandler(id, billDeduction) {
      this.form.decrement = billDeduction ? billDeduction : 0
      this.addBillVisible = true
      this.form.id = id
    }
    // handleSizeChange() {},
    // handleCurrentChange() {},
    // handleClose() {}
  }
}
</script>

<style></style>
